<template>
  <div class="code-layout">
    <div class="code-info">
      <div class="code-info-item">
        <h3 class="info-title">基本信息<i class="el-icon-edit-outline edit" @click="updateBase" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">名称:</span>
            <span class="val">{{ detailDataNow.name }}</span>
          </li>
          <li>
            <span class="key">别名： </span>
            <span class="val">{{ detailDataNow.alias }}</span>
          </li>
          <li>
            <span class="key">挂载地址： </span>
            <span class="val">/dataset/{{ detailDataNow.alias }}</span>
          </li>
          <li>
            <span class="key"> 创建人： </span>
            <span class="val">{{ detailDataNow.create_user && (detailDataNow.create_user.nick_name ||
              detailData.create_user.username) }}</span>
          </li>
          <li>
            <span class="key">创建时间： </span>
            <span class="val">{{ detailDataNow.create_time }}</span>
          </li>
        </ul>
      </div>
      <div class="code-info-item">
        <h3 class="info-title">数据来源<i class="el-icon-edit-outline edit" v-if="s3_flag" @click="updateSource" /></h3>
        <ul class="info-item">
          <li>
            <span class="val" v-if="detailDataNow.file_source == 1">本地上传 </span>
            <span class="val" v-if="detailDataNow.file_source == 2">S3 </span>
          </li>
        </ul>
        <ul class="info-item" v-if="detailDataNow.file_source == 2">
          <li>
            <span class="key">S3地址：</span>
            <span class="val">{{ detailDataNow.s3_path }} </span>
          </li>
        </ul>
      </div>

      <div class="code-md">
        <md-preview :biz_id="$route.query.id" type="dataset" class="preview" />
      </div>
    </div>


    <!-- <el-dialog :visible.sync="showUpdateBaseDialog" title="数据集基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitUpdateBaseRules" :model="addUpdateBaseForm"
        label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="addUpdateBaseForm.name" />
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input type="text" v-model="addUpdateBaseForm.alias" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addUpdateBaseForm.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="addUpdateBaseForm.desc" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
          <el-button class="none-type" @click="cancelUpdateBase">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <!-- <el-dialog :visible.sync="showUpdateDialog" title="数据集基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="detailDataNow" label-width="120px">
        <el-form-item label="数据来源" prop="file_source">
          <el-radio-group v-model="detailDataNow.file_source">
            <el-radio :label='1'>本地上传</el-radio>
            <el-radio :label='2'>S3接入</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="detailDataNow.file_source == 2">
          <el-form-item label="bucket名称" prop="s3_access_id">
            <el-select v-model="detailDataNow.s3_access_id">
              <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="s3路径" prop="s3_path">
            <el-input v-model="detailDataNow.s3_path" class="entrance" />
          </el-form-item>
        </div>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitSource">确定</el-button>
          <el-button class="none-type" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->


    <DialogBox title="数据集基本信息" :visible="showUpdateBaseDialog" :confirm="commitBase" :close="cancelUpdateBase">
      <el-form class="form myself-form" ref="form" :rules="submitUpdateBaseRules" :model="addForm" label-width="60px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input type="text" v-model="addForm.alias" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="addForm.desc" />
        </el-form-item>
      </el-form>
    </DialogBox>

    <DialogBox title="数据集基本信息" :visible="showUpdateDialog" :confirm="commitSource" :close="cancel">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="detailDataNow" label-width="120px">
        <el-form-item label="数据来源" prop="file_source">
          <el-radio-group v-model="detailDataNow.file_source">
            <el-radio :label='1'>本地上传</el-radio>
            <el-radio :label='2'>S3接入</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="detailDataNow.file_source == 1">
          <div class="dialog-footer">本地上传在文件板块上传</div>
        </div>
        <div v-if="detailDataNow.file_source == 2">
          <el-form-item label="bucket名称" prop="s3_access_id">
            <el-select v-model="detailDataNow.s3_access_id">
              <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="s3路径" prop="s3_path">
            <el-input v-model="detailDataNow.s3_path" class="entrance" />
          </el-form-item>
        </div>
      </el-form>
    </DialogBox>
  </div>
</template>

<script>
import { putDataSet } from '@/api/dataset'
import { getAllAssetS3 } from '@/api/inout'
import { paramMap } from '@/utils/maps'
import DialogBox from '../../components/module/dialog-box.vue';
export default {
  data() {
    return {
      s3_flag: paramMap["s3_flag"],
      detailDataNow: {},
      addForm: {},
      s3Options: [],
      showUpdateDialog: false,
      submitRules: {
        file_source: [
          { required: true, message: "数据来源不能为空" },
        ],
      },
      addUpdateBaseForm: {},
      showUpdateBaseDialog: false,
      submitUpdateBaseRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 2, max: 40, message: "长度在2到40个字符" },
        ],
        alias: [
          { required: true, min: 5, max: 25, message: "长度在5到25个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
      },
    };
  },
  props: ["detailData"],
  watch: {
    detailData(val) {
      this.detailDataNow = val;
    },
    taskId(val) {
      console.log(val)
      this.path = val
    }
  },
  async mounted() {
    this.getS3();
    this.detailDataNow = this.detailData;
    console.log("detailDataNow:", this.detailDataNow, this.detailDataNow.name);
  },
  destroyed() {
  },
  methods: {
    updateBase() {
      this.showUpdateBaseDialog = true;
      this.addForm = this.detailDataNow
    },
    avatarPath(data) {
      this.addForm.avatar = data;
    },
    commitBase() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putDataSet(this.addForm);
          if (res && res.data) {
            this.showUpdateBaseDialog = false;
          }
        }
      });
    },
    cancelUpdateBase() {
      this.showUpdateBaseDialog = false;
    },
    async getS3() {
      let res = await getAllAssetS3();
      this.s3Options = res.data;
      console.log("s3Options", this.s3Options);
    },
    updateSource() {
      this.showUpdateDialog = true;
    },
    commitSource() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putDataSet(this.detailDataNow);
          if (res && res.data) {
            this.showUpdateDialog = false;
          }
        }
      });
    },
    cancel() {
      this.showUpdateDialog = false;
    }
  },
  components: { DialogBox }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";

.dialog-footer {
  font-weight: 700;
  margin-left: 45px;
  font-size: 18px;
}
</style>